<template>
  <div class="h-full flex flex-col bg-white">
    <div class="flex items-center justify-end px-4 py-2 border-b border-gray-100">
      <el-button
        type="text"
        icon="el-icon-refresh"
        size="small"
        class="!text-primary-500 hover:!text-primary-600"
        :loading="loading"
        @click="$emit('refresh')"
      >
        刷新
      </el-button>
    </div>

    <div class="flex-1 overflow-y-auto py-1" v-loading="loading">
      <div
        v-if="frames.length === 0 && !loading"
        class="flex flex-col items-center justify-center h-48 text-gray-400"
      >
        <i class="el-icon-warning text-5xl mb-2 opacity-50"></i>
        <p class="text-sm my-1">暂无堆栈信息</p>
        <p class="text-xs my-1 opacity-70">调试器暂停时可查看堆栈</p>
      </div>

      <div
        v-for="(frame, index) in frames"
        :key="index"
        class="flex px-4 py-2.5 cursor-pointer transition-colors border-l-3 border-transparent hover:bg-gray-50"
        :class="{ '!bg-blue-50 !border-primary-500': index === 0 }"
        @click="selectFrame(frame, index)"
      >
        <div class="w-8 flex-shrink-0 text-xs text-gray-500 font-medium text-center">
          {{ index }}
        </div>
        <div class="flex-1 overflow-hidden">
          <div class="flex items-center text-sm text-gray-800 mb-1 gap-1.5">
            <i class="el-icon-link text-blue-400 text-sm"></i>
            <span class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ frame.function || 'unknown' }}</span>
          </div>
          <div class="flex items-center text-xs text-gray-500 mb-0.5 gap-1">
            <i class="el-icon-document text-xs"></i>
            <span class="text-blue-500">{{ formatFileName(frame.file) }}</span>
            <span v-if="frame.line" class="text-green-600">:{{ frame.line }}</span>
          </div>
          <div v-if="frame.file" class="text-[10px] text-gray-400 whitespace-nowrap overflow-hidden text-ellipsis mt-0.5">
            {{ frame.file }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StacktracePanel',
  props: {
    frames: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    selectFrame(frame, index) {
      this.$emit('select-frame', { frame, index })
    },

    formatFileName(filePath) {
      if (!filePath) return 'unknown'
      const parts = filePath.split(/[/\\]/)
      return parts[parts.length - 1]
    }
  }
}
</script>

<style scoped>
/* 使用 Tailwind CSS 代替大部分样式 */
</style>
